<template>
  <div class="duihuazcss">
    <div class="jftop">
            <van-icon name="arrow-left" class="bbss" @click="diansjj" />
            <div class="boxs">结算</div>
    </div>
    <div class="jstop">
        <div>
            <div @click="shouhuodizhi">添加收货地址</div>
        </div>
    </div>
    <div class="fxk">
        <div class="diwsss"><van-checkbox v-model="checked"></van-checkbox></div>
        <div class="dizhilan">
        <p>{{ dizhi.name }}&nbsp;&nbsp;&nbsp;&nbsp;{{ dizhi.phone }}</p>
        <p>{{ dizhi.province }}{{ dizhi.city }}{{ dizhi.county }}{{ dizhi.detail_addr }}</p>
        </div>
    </div>
    <div class="duihuanxx">
        <div class="sahngpqd">商品清单：</div>
        <div>
            <div class="divsss">
                <div class="jfimg">
                    <img :src="duihuanarr.lb1" alt="">
                </div>
                <div class="ppps">
                    <p class="jfp jfp1">{{duihuanarr.p1}}</p>
                    <p><span class="jfsp1">{{duihuanarr.p3}}积分+{{duihuanarr.p4}}元</span></p> 
                </div>
            </div>
        </div>
    </div>
    <div class="paddings">
        <div class="butduihua">
            <div>订单留言:</div>
            <div><input type="text" placeholder="对本次交易有什么要补充的(300字内)"></div>
        </div>
        <div class="butduihua">
            <div>积分抵扣</div>
            <div class="jf188">{{duihuanarr.p3}}积分</div>
        </div>
    </div>
    <div class="butssss">
        <div class="jssss"><span>共计1件商品</span><span class="butspan">总积：</span><span class="butgj">{{duihuanarr.p3}}积分+{{duihuanarr.p4}}元</span></div>
        <div class="tjddds">提交订单</div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            duihuanarr:"",
            dizhi:"",
            checked: true,
        }
    },
    methods:{
        diansjj(){
            // this.$router.push("/jifenxiangxi").catch(err=>err)
            this.$router.push({ path: '/jifenxiangxi', query: { id2: this.duihuanarr }}).catch(err=>err)
        },
        shouhuodizhi(){
            this.$router.push("/dizhi").catch(err=>err)
        }
    },
    mounted(){
        this.duihuanarr = this.$route.query.id1
        this.$http({
            url:"http://localhost:3000/dizhibianji",
            method:"get"
        }).then(res=>{
            this.dizhi = res.data[0];
            // console.log(this.dizhi);
        }) 
    },
    watch:{
        '$route':function(){
            this.duihuanarr = this.$route.query.id1
        }
    }
}
</script>

<style scoped>
.diwsss{
    display: flex;
    justify-content: center;
    /* align-items: center; */
}
.fxk{
    display: flex;
    width: 88vw;
    padding: 2vw 3vw;
    background-color: #FFF;
    margin: 0 0 3vw 3vw;
}
.dizhilan{
    width: 88vw;
    padding: 2vw 0vw;
    background-color: #FFF;
    margin: 2vw 0vw;
}
.dizhilan p{
    margin: 2vw 3vw;
}
.butgj{
    color: #E74C3C;
}
.jssss{
    flex-grow: 1;
    font-size: 3.5vw;
    padding-left: 3vw;
}
.butspan{
    margin: 0 0 0 10vw;
}
.tjddds{
    width: 25vw;
    height: 15vw;
    background-color: #E74C3C;
    color: #FFF;
    text-align: center;
}
.butssss{
    width: 100vw;
    height: 15vw;
    background-color: #FFF;
    position: fixed;
    bottom: 0;
    display: flex;
    left: 0;
    line-height: 15vw;
}
.jf188{
    margin-left:53vw ;
    color: #E74C3C;
}
input{
    width: 70vw;
    height: 8vw;
    border: 0;
}
.paddings{
    padding-bottom: 60vw;
}
.butduihua{
    display: flex;
    margin: 3vw 3vw;
    background-color: #FFF;
    padding: 2vw;
    line-height: 10vw;
}
.ppps{
    padding: 4vw 0;
}
.sahngpqd{
    padding: 3vw 4vw;
}
.jfp{
    width: 60vw;
    margin: 6vw 0;
}
.jfsp1{
    font-size: 4.5vw;
    color: #E74C3C;
}
.jfp1{
    font-size: 4vw;
    margin-top: 2vw;
}
.divsss{
    display: flex;
}
.jfimg img{
    width: 24vw;
    margin: 6vw 5vw 3vw 3vw;
}
.duihuanxx{
    background-color: #FFF;
    margin: 0 3vw 5vw 3vw;
    border-radius: 5px;
}
.jstop div div{
    padding: 2vw;
    border: 1px solid red;
    border-radius: 5px;
    opacity: 0.6;
}
.jstop div{
    margin: 2vw;
    background-color: #FFF;
    padding: 2vw 28.5vw;
    border-radius: 7px;
}
.duihuazcss{
    background-color: #f7f7f7;
}
.jstop{
    margin-top: 13vw;
    padding: 1vw;
    
}
.jftop{
    width: 100vw;
    height: 13vw;
    background-color: #FFF;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
.jftop .boxs{
    width: 50vw;
    height: 13vw;
    text-align: center;
    line-height: 13vw;
}
.bbss{
    width: 20vw;
    height: 8vw;
    font-size: 6vw;
    padding: 4vw 0 0 4vw;
    opacity: 0.3;
}
</style>